<template>
  <div class="swiper-container" ref="floor1Swiper">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(carousel, index) in floor.carouselList" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
export default {
  name: "Carsousel",
  props: ["floor"],
  watch:{
    floor:{
        //立即监听:不管你数据有没有变化,我上来立即监听一次
        //为什么watch监听不到floor,因为这个数据从来没有发生变化(数据是父亲给的,父亲给的时候就是一个对象,对象里面该有的数据都是有的)
        immediate:true,
        handler(){
            //只能监听到数据已经有了,但是v-for动态渲染结构我们还是没有办法确定,因此还是需要用nextTIck 
            var mySwiper = new Swiper(this.$refs.floor1Swiper, {
            //设置轮播图自动轮播
            loop: true,
            //设置轮播图自动轮播时间
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            //设置轮播图左右切换按钮
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
          },
       },
        },
  mounted() {
    // console.log(this.floor);
    // console.log(this.$refs.floor1Swiper);
    // console.log(this.$refs.floor1Swiper.swiper);
    // console.log(this.$refs.floor1Swiper.swiper.slides);
    // console.log(this.$refs.floor1Swiper.swiper.slides[0]);
  }
};
</script>

<style>
</style>